import { Button, Dropdown } from 'antd'
import React from 'react'

import styles from './index.module.less'
import { ItemType } from 'antd/es/menu/interface'
import { DownOutlined } from '@ant-design/icons'

type TableActionOptionsItem = ItemType & {
  hidden?: boolean
}

export interface TableActionProps {
  options: TableActionOptionsItem[]
  btnText?: string | React.ReactNode
}

export default function TableAction({ options, btnText }: TableActionProps) {
  const dropdownOptions = options.filter((item) => !item.hidden)

  return (
    <Dropdown menu={{ items: dropdownOptions }} trigger={['click']}>
      <Button type="link" size="small" className={styles.tableAction}>
        <span className={styles.inner}>
          {btnText || '更多'}
          <DownOutlined />
        </span>
      </Button>
    </Dropdown>
  )
}
